{% include 'XTGL/XTGL_index.html' %}

<div class="am-cf admin-main">
{% include 'sidebar.html' %}
  <!-- content start -->
  <div class="admin-content">
    <div class="admin-content-body">
      <div class="am-cf am-padding">
        <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">个人中心</strong></div>
      </div>

      <div class="am-g">
        

        <div class="am-u-sm-12 am-u-md-12 ">
          <div class="am-u-sm-12">
            <div class="am-btn-toolbar">
              <div class="am-btn-group am-btn-group-xs">
                <button style="margin: 0 5px" type="button" class="am-btn am-btn-default am-btn-xs am-text-secondary" onclick="personal_modify()" id="personal_modify">修改个人信息</button>
                <button style="margin: 0 5px" type="button" class="am-btn am-btn-default am-btn-xs am-text-secondary" onclick="personal_paswd()">修改密码</button>
              </div>
            </div>
          </div>
          <!--中间侧块 注意下面是form表-->
          <br><br><br>
          <div class="am-form-group">

            <div class="am-g am-margin-top am-form-group">
              <div class="am-u-sm-4 am-u-md-2 am-text-right">姓名:</div>
              <div class="am-u-sm-8 am-u-md-4 am-u-end" style="padding-left: 0px;">
                <input type="text" disabled="1"  class="am-input-xl" style="width: 150px" id='real_name' name='real_name' required="" value="{{ data.0.real_name }}">
              </div>

            </div>
            <hr/>
            <div class="am-g am-margin-top am-form-group">
              <div class="am-u-sm-4 am-u-md-2 am-text-right">性别:</div>
              <div class="am-u-sm-8 am-u-md-4 am-u-end" style="padding-left: 0px;">
                <select disabled="1"  id='sex' name='sex' style="width: 150px" required="">
                  {% if data.0.sex == 0 %}
                    <option value="2">未知</option>
                    <option value="1">男</option>
                    <option value="0" selected="selected">女</option>
                  {% elif data.0.sex == 1 %}
                    <option value="2">未知</option>
                    <option value="1" selected="selected">男</option>
                    <option value="0">女</option> 
                  {% elif data.0.sex == 2 %}
                    <option value="2" selected="selected">未知</option>
                    <option value="1">男</option>
                    <option value="0">女</option> 
                  {% endif %} 
                </select>
              </div>

            </div>
            <hr/>
            <div class="am-g am-margin-top am-form-group">
              <div class="am-u-sm-4 am-u-md-2 am-text-right">生日日期:</div>
              <div class="am-u-sm-8 am-u-md-4 am-u-end" style="padding-left: 0px;">
                <input type="date"   class="am-form-field am-input-sm" disabled="1" style="width: 150px" placeholder="日期"  id='birthday' name='birthday' required="" value="{{ data.0.birthday }}">
              </div>

            </div>
            <hr/>
            <div class="am-g am-margin-top am-form-group">
              <div class="am-u-sm-4 am-u-md-2 am-text-right">部门名称:</div>
              <div class="am-u-sm-8 am-u-md-4 am-u-end" style="padding-left: 0px;">
                <input type="text" disabled="1" class="am-input-xl" style="width: 150px" id='organize_name' name='organize_name' required="" value="{{ data.0.organize_name }}">
              </div>

            </div>
            <hr/>
            <div class="am-g am-margin-top am-form-group">
              <div class="am-u-sm-4 am-u-md-2 am-text-right">职务:</div>
              <div class="am-u-sm-8 am-u-md-4 am-u-end" style="padding-left: 0px;">
                <input type="text"  class="am-input-xl" disabled="1" style="width: 150px" id='duty_name' name='duty_name' required="" value="{{ data.0.duty_name }}">
              </div>

            </div>
            <hr/>
            <div class="am-g am-margin-top am-form-group">
              <div class="am-u-sm-4 am-u-md-2 am-text-right">电话:</div>
              <div class="am-u-sm-8 am-u-md-4 am-u-end" style="padding-left: 0px;">
                <input type="text"  class="am-input-xl" disabled="1" style="width: 150px" id='mobile' name='mobile' required="" value="{{ data.0.mobile }}">
              </div>

            </div>
            <hr/>
            <div class="am-g am-margin-top am-form-group">
              <div class="am-u-sm-4 am-u-md-2 am-text-right">邮箱:</div>
              <div class="am-u-sm-8 am-u-md-4 am-u-end" style="padding-left: 0px;">
                <input type="text"  class="am-input-xl" disabled="1" style="width: 150px" id='email' name='email' required="" value="{{ data.0.email }}">
              </div>

            </div>
          </div>
          
        </div>

      </div>
    </div>
  <!-- content end -->
  </div>
</div>
{% include 'footer.html' %}
<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="/static/assets/js/jquery.min.js"></script>
<!--<![endif]-->
<script src="/static/assets/js/amazeui.min.js"></script>
<script src="/static/assets/js/amazeui.tree.js"></script>
<script type="text/javascript" src="/static/assets/js/layer.js"></script>
<script src="/static/assets/datatables/amazeui.datatables.min.js"></script>
<script src="/static/assets/dialog/amazeui.dialog.min.js"></script>
<link rel="stylesheet" type="text/css" href="/static/assets/css/amazeui.tree.css" />
<script src="/static/assets/js/app.js"></script>
<style type="text/css">
  input:disabled{
    border:1px solid #DDD;
    background-color:#F5F5F5;
    color:#ACA899;
  }
  select:disabled{
    border:1px solid #DDD;
    background-color:#F5F5F5;
    color:#ACA899;
  }
</style>
<script type="text/javascript">
$("#collapse-nav").addClass("am-in");
$("#xtgl").removeClass("am-collapsed");
$("#xtglOgrzx").css("color","#3399CC");
$("#xtgl").css("color","#3399CC");

  function personal_modify(){
    var button_name = $('#personal_modify').text();
    if(button_name=="修改个人信息"){
      $('#personal_modify').text('保存个人信息');
      $('#real_name').attr("disabled",false);
      $('#sex').attr("disabled",false);
      $('#birthday').attr("disabled",false);
      $('#mobile').attr("disabled",false);
      $('#email').attr("disabled",false);
    }else if(button_name=="保存个人信息"){
      $('#personal_modify').text('修改个人信息');
      $('#real_name').attr("disabled",true);
      $('#sex').attr("disabled",true);
      $('#birthday').attr("disabled",true);
      $('#mobile').attr("disabled",true);
      $('#email').attr("disabled",true);
      personal_submit();
    }
  }


 function personal_submit(){
  var real_name = document.getElementById("real_name").value;
  var sex = $('#sex option:selected').val();
  var birthday = document.getElementById("birthday").value;
  var mobile = document.getElementById("mobile").value;
  var email = document.getElementById("email").value;
 
  if(real_name==''){
    AlertMSG("姓名不能为空！")
  }else if (birthday==''){
    AlertMSG("请填写出生日期！")
  }else if (mobile==''){
    AlertMSG("电话不能为空！")
  }else if (email==''){
    AlertMSG("邮箱不能为空！")
  }else {
    //window.open("/XTGL_GRZX_3/?login_name="+login_name+"&sex="+sex+"&birthday="+birthday+"&mobile="+mobile+"&email="+email+"")
    $.ajax({
      "url":"/XTGL_GRZX_3/?real_name="+real_name+"&sex="+sex+"&birthday="+birthday+"&mobile="+mobile+"&email="+email+"",
      "datatype":"json",
      "type":"get",
      "async":"false"
    }).success(function(data){
      if (data.status == 1) {
        //AlertMSG_SUCCESS("修改个人信息成功！")
        location.reload();
      } else {
        AlertMSG(data.message)
      }
    }).error(function(data){
      AlertMSG("保存失败！")
    });
  }
}


  function personal_paswd(){
    popup("修改密码","/XTGL_GRZX_PAWD/")
  };

  function popup(title,url){
        var index = layer.open({
            type: 2,
            title: title,
            content: url,
            area: ['700px', '350px'],            
        });
        
        //铺满界面
        //layer.full(index);
  }
  var AlertMSG=function(msg){
    AMUI.dialog.alert({ title: '错误提示', content: msg, onConfirm: function() { console.log('close'); } });
  }
  var AlertMSG_SUCCESS=function(msg){
    AMUI.dialog.alert({ title: '成功提示', content: msg, onConfirm: function() { console.log('close'); } });
  }
</script>
</body>
</html>
